<template>
	<view class="all">
		  <view class="daohang">
			  <view v-for="(item,index) in daohanglan" class="dangedaohang" data-index="{{index}}" @click="click">
				  <view>{{item}}</view>
			  </view>
		  </view>
		  <paizhuo v-if="show==1"></paizhuo>
		  <jishiqi v-if="show==2"></jishiqi>
		   <touxiangkuang v-if="show==3"></touxiangkuang>
		  <qipao v-if="show==4"></qipao>
		 
	</view>
</template>

<script>
	import paizhuo from "@/pages/index/wanfa/paizhuo"
	import jishiqi from "@/pages/index/wanfa/jishiqi"
	import touxiangkuang from "@/pages/index/wanfa/touxiangkuang"
	export default {
		components:{
			paizhuo,
			jishiqi,
			touxiangkuang
		},
		data() {
			return {
				daohanglan:["牌桌","计时器","头像框"],
				show:3
			}
		},
		created(){
			
		},
		methods: {
			click(event){
				  if(this.daohanglan[event.currentTarget.dataset.index]=="牌桌")
				     this.show=1
				  else if(this.daohanglan[event.currentTarget.dataset.index]=="计时器")
				   this.show=2
				  else if(this.daohanglan[event.currentTarget.dataset.index]=="头像框")
				   this.show=3
				 
			}
		}
	}
</script>

<style>
	.all{
		width: 500rpx;
		height: 350rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: antiquewhite;
		z-index: 10;
	}
     .daohang{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 font-size: 25rpx;
		 width:120rpx ;
		 height:350rpx ;
		 border: 1rpx solid aquamarine;
	 }
	 .dangedaohang{
		 height: 50rpx;
		 width:120rpx ;
		 border: 1rpx solid aquamarine;
		text-align: center;
		line-height: 50rpx;
	 }
</style>
